<% layout('/layouts/default.html', {title: '艺人信息管理', libs: ['validate','fileupload']}){ %>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header with-border">
			<div class="box-title">
				<i class="fa fa-list-alt"></i> ${text(activityUserEntertainer.isNewRecord ? '新增艺人信息' : '编辑艺人信息')}
			</div>
			<div class="box-tools pull-right">
				<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
			</div>
		</div>
		<#form:form id="inputForm" model="${activityUserEntertainer}" action="${ctx}/user/activityUserEntertainer/save" method="post" class="form-horizontal">
			<div class="box-body">
				<div class="form-unit">${text('基本信息')}</div>
				<#form:hidden path="id"/>
				<#form:hidden path="cases"/>
				<#form:hidden path="userId"/>
				<#form:hidden path="accessNumber"/>
				<div class="row">
					<div class="row">
						<div class="col-xs-6">
							<div class="form-group">
								<label class="control-label col-sm-4" title="">
									<span class="required hide">*</span> ${text('头像')}：<i class="fa icon-question hide"></i></label>
								<div class="col-sm-8">
									<img id="avatarImg"  class="profile-user-img img-responsive img-circle"
										 src="${activityUserEntertainer.avatar}" onerror="this.src = '/js/static/images/cs.jpg'">
									<#form:imageclip name="imageBase64" btnText="修改头像" btnClass="btn-block"
									imageId="avatarImg" imageDefaultSrc="/js/static/images/default.jpg"
									circle="true"/>
								</div>
							</div>
						</div>
					</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('名字')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="name" maxlength="25" class="form-control required"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('手机号')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="phone" maxlength="11" class="form-control mobile"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('性别')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:select path="gender" dictType="ac_user_sex"  class="form-control  required" />
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('年龄')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="age" maxlength="2" class="form-control digits"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('展示图片')}：<i class="fa icon-question hide"></i></label>
						</div>
					</div>
                    <div class="col-sm-8 col-sm-offset-2">
                        <#form:hidden path="showPictures" id="showPictures"/>
                        <label style="display: none">
                            <#form:input name="activitySmimg" id="activitySmimg" maxlength="255" class="form-control"/>
                        </label>
                        <div class="hidden">
                            <#form:fileupload id="upload" bizKey="${activityUserEntertainer.id}" bizType="activityUserEntertainer_photos" uploadType="image"  allowSuffixes=".jpg,.png,.jpeg" returnPath="true" filePathInputId="activitySmimg" isMini="true"  readonly="false"/>
                        </div>
                        <ul class="list-group" id="picturesUL">
                        </ul>
                        <label id="addPicture" class="btn btn-default">添加图片</label>
                    </div>
				</div>
                    <br>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('服务城市')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:treeselect id="cityCode" title="${text('区域选择')}"
									path="cityCode" labelPath="city"
									canSelectRoot="true" canSelectParent="true"
									returnFullName="false" returnFullNameSplit="-"
									url="${ctx}/sys/area/treeData"
									class="" allowClear="true"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('标签')}：用'|'分割 <i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="label" maxlength="255" class="form-control"/>
							</div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('艺人介绍')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:textarea path="presentation" rows="4" maxlength="500" class="form-control"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2" title="">
								<span class="required hide">*</span> ${text('备注信息')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-10">
								<#form:textarea path="remarks" rows="4" maxlength="500" class="form-control"/>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box-footer">
				<div class="row">
					<div class="col-sm-offset-2 col-sm-10">
						<% if (hasPermi('user:activityUserEntertainer:edit')){ %>
							<button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i> ${text('保 存')}</button>&nbsp;
						<% } %>
						<button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}</button>
					</div>
				</div>
			</div>
		</#form:form>
	</div>
</div>
<% } %>
<script>
var $picturesUL,$showPictures;
$("#inputForm").validate({
	submitHandler: function(form){
        var imgArr = [];
        //遍历ul
        $picturesUL.children().each(function () {
            var index = $(this).children('img')[0].src.indexOf("/js/userfiles/");
            if (index !== -1) {
                imgArr.push($(this).children('img')[0].src.substr(index));
            }
        });
        var urls = imgArr.join("|");
        $showPictures[0].value = urls;
		js.ajaxSubmitForm($(form), function(data){
			js.showMessage(data.message);
			if(data.result == Global.TRUE){
				js.closeCurrentTabPage(function(contentWindow){
					contentWindow.page();
				});
			}
		}, "json");
    }
});
$("#addPicture").click(function () {
    $(".webuploader-element-invisible")[0].click();
});
$("#activitySmimg").change(function () {
    var url = $(this)[0].value;
    var arr = url.split("|");
    url = arr[arr.length-1];
    addPictures(url);
});

$(document).ready(function () {
    $showPictures = $("#showPictures");
    $picturesUL = $("#picturesUL");
    cleanUL();//清理

});

function deletePic(event) {
    $(event).parent().remove();
}

function addPictures(url) {
    var li = "<li class='list-group-item'><button onclick='deletePic(this)' class='badge btn btn-danger'>删 除</button>" +
        "<img src='"+url+"' class=''/></li>";
    $picturesUL.append(li);
}

function cleanUL() {
    $picturesUL.children().remove();
    //切割内容
    var url = $showPictures[0].value;
    if (url != null && url !== ''){
        var arr = url.split("|");
        //添加
        $.each(arr,function(index,value){
            if (value != null && value !== "") {
                addPictures(value);
            }
        });
    }

}
</script>